<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a>
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>绿杨-威客系统管理端</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-menu-item nzSelected>
        <a routerLink="/">首页</a>
      </li>
      <li nz-menu-item>
        <a routerLink="order">订单管理</a>
      </li>
      <li nz-menu-item>
        <a routerLink="shop">店铺管理</a>
      </li>
      <li nz-menu-item>
        <a routerLink="user">用户管理</a>
      </li>
      <li nz-menu-item>
        <a routerLink="config">订单字段配置</a>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <span class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></span>
        </span>
        <div style="flex: 1"></div>
        <div style="padding: 0 12px;cursor: pointer" nz-popconfirm
             nzPopconfirmTitle="是否退出该用户"
             nzPopconfirmPlacement="bottom"
             (nzOnConfirm)="exit()">退出登录</div>
        <div style="padding: 0 24px">{{http.user.name}}</div>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>
